<template>
	<view class="consult-content">
		<view class="tips">为了更好地为您提供专业细致的服务，请您准确提供以 下信息，我们会有专人跟您联系，谢谢合作！</view>
		<view class="fromData">
			<uni-forms v-model="consult" :rules="rules" ref="consult" label-position="top" label-width="200">
				<uni-forms-item required trim="all" label="您的姓名" name="name">
					<uni-easyinput type="text" v-model="consult.name" placeholder="请输入您的姓名" />
				</uni-forms-item>
				<uni-forms-item required label="您的联系方式" name="contact_phone">
					<uni-easyinput trim="all" type="number" v-model="consult.contact_phone" placeholder="请输入您的联系方式" />
				</uni-forms-item>
				<uni-forms-item required label="咨询留言" name="message">
					<uni-easyinput trim="all" type="textarea" v-model="consult.message" placeholder="请输入您的留言内容" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="btns" @click="getliveConsults">确认提交</view>
	</view>
</template>

<script>
	import {
		getliveConsult
	} from '../../api/live.js'
import { toast } from '../../utils/common.js'
	export default {
		data() {
			return {
				consult: {
					name: '',
					contact_phone: '',
					message: ''
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 1,
								maxLength: 5,
								errorMessage: '姓名长度在 1 到 5 个字符',
							}
						]
					},
					// 对phone字段进行必填验证
					contact_phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					},
					message: {
						rules: [{
							required: true,
							errorMessage: '请输入咨询信息',
						}]
					}
				}
			}
		},
		methods: {
			getliveConsults() {
				let that = this
				this.$refs.consult.validate().then((res) => {
					// console.log(res);
					getliveConsult(res).then(res1=>{
						toast('已提交！！！');
						that.consult.name = '';
						that.consult.contact_phone = '';
						that.consult.message = '';
					}).catch()
				}).catch((err) => {
					// 表单校验验失败，err 为具体错误信息
					// 其他逻辑处理
					// ...
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.consult-content {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 20upx 20upx 0;

		.tips {
			color: #FF6D6B;
			background: #FFE6E5;
			border-radius: 10upx;
			padding: 20upx;
			line-height: 60upx;
		}

		.btns {
			background-color: #2AC092;
			text-align: center;
			border-radius: 10upx;
			color: #fff;
			font-size: 34upx;
			padding: 24upx 0;
		}
	}
</style>